{% extends 'login_base.html' %}
{% load static %}

{% block title %}用户注册{% endblock %}

{% block header_css %}
    <link rel="stylesheet" href="{% static 'css/register.css' %}">
{% endblock %}

{% block form_model %}
    <form method="post" action="{% url 'users:register' %}">
        {% csrf_token %}
        <div class="form-group">
            <label for="username" class="control-label">用户名</label>
            <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="password" class="control-label">密码</label>
            <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="code" class="control-label">验证码</label>
            <!-- <input type="text" class="form-control" id="code" placeholder="请输入验证码"> -->
            <div class="input-group">
                <input type="text" class="form-control" name="captcha" placeholder="四位字符验证码"/>
                <img id="captcha" class="captcha" src="{% url 'users:captcha' %}"/>
                <a class="captcha_load" href="javascript:void(0)" id="captcha-toggle">换一张</a>
            </div>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-block" id="login-button">注册</button>
        </div>
        <p class="text-right"><a href="{% url 'users:login' %}">返回登录</a></p>
    </form>
{% endblock %}

{% block footer %}
    <script>
        $('#captcha-toggle').on('click', function () {
            var base_url = $('#captcha').attr('src').indexOf('?') > -1 ? $('#captcha').attr('src').split('?')[0] : $('#captcha').attr('src');
            var new_url = `${base_url}?${+new Date()}`;
            $('#captcha').attr('src', new_url);
        })
    </script>
{% endblock %}